<template>
  <a-card hoverable title="历史" style="padding: 0 20px 0 20px" size="small">
    <a-steps :current="1" size="small">
      <a-step>
        <!-- <span slot="title">Finished</span> -->
        <template #title>Finished</template>
        <template #description>
          <span>This is a description.</span>
        </template>
      </a-step>
      <a-step description="This is a description." sub-title="Left 00:00:08" title="In Progress"/>
      <a-step description="This is a description." title="Waiting"/>
    </a-steps>
  </a-card>

  <a-divider type="horizontal"/>

  <a-card hoverable title="我的处理" size="small">
    <a-form :label-col="labelCol" :model="form" :wrapper-col="wrapperCol">
      <a-form-item label="处理意见">
        <a-textarea v-model="form.comment" :rows="3" size="mini"/>
      </a-form-item>

      <a-form-item label="任务分支">
        <a-radio-group v-model:value="form.branching" :options="branchingOptions"
                       name="radioGroup"/>
      </a-form-item>

      <a-form-item label="任务跳转">
        <a-switch v-model:checked="isJump" size="small"/>
        <template v-if="isJump">
          <a-divider type="vertical"/>
          <a-select
            ref="taskJump"
            v-model:value="form.jump"
            :options="taskJumpOptions"
            style="width: 120px"
          />
        </template>
      </a-form-item>

      <a-form-item label="指定下一步操作人">
        <a-switch v-model:checked="isSpecifyNextAssignee" size="small"/>
        <template v-if="isSpecifyNextAssignee">
          <a-divider type="vertical"/>
          <JSelectUser v-model:value="form.nextAssignee" placeholder="请选择用户"
                       style="width: 200px"/>
        </template>
      </a-form-item>

      <a-form-item label="抄送">
        <a-switch v-model:checked="isExtracts" size="small"/>
        <template v-if="isExtracts">
          <a-divider type="vertical"/>
          <JSelectUser v-model:value="form.extractsAssignee" placeholder="请选择用户"/>
        </template>
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button html-type="submit" type="primary">提交任务</a-button>
      </a-form-item>

    </a-form>
  </a-card>
</template>

<script lang="ts" setup>

import {reactive, ref} from "vue";
import type {RadioGroupProps, SelectProps} from 'ant-design-vue';
import JSelectUser from "@/components/Form/src/jeecg/components/JSelectUser.vue";

const labelCol = {span: 4};
const wrapperCol = {span: 14};

interface FormState {
  comment: string;
  branching: string;
  jump: string;
  nextAssignee: string;
  extractsAssignee: string;
}

const form = reactive<FormState>({
  comment: '',   // 处理意见
  branching: '', // 任务分支
  jump: '',      // 跳转
  nextAssignee: '',  // 下步操作人
  extractsAssignee: '', // 抄送人
})

const branchingOptions = ref<RadioGroupProps['options']>([
  {label: '通过', value: 'pass'},
  {label: '驳回', value: 'rollback'},
])

const isJump = ref<boolean>(false)
const taskJumpOptions = ref<SelectProps['options']>([
  {label: '节点1', value: '1'},
  {label: '节点2', value: '2'},
])

const isSpecifyNextAssignee = ref<boolean>(false)
const isExtracts = ref<boolean>(false)

</script>


<style lang="less" scoped>

</style>
